<template>
  <div class="container-fluid row" style="height: 100%">
    <div class="col-lg-3 col-md-4 col-sm-5 position-absolute top-50 start-50 translate-middle">
      <h4 class="text-center" style="line-height: 60px">
        <img alt="LumbaShark" height="80" src="../../../assets/Logo.png" width="80" />
      </h4>
      <div class="card">
        <div class="card-body">
          <n-tabs type="bar" justify-content="space-evenly" :default-value="mode">
            <n-tab-pane name="login" :tab="$t('user.login.title')">
              <Login />
            </n-tab-pane>
            <n-tab-pane name="signup" :tab="$t('user.register.title')">
              <SignUp />
            </n-tab-pane>
          </n-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { NTabs, NTabPane, useMessage } from "naive-ui";
import { onMounted } from "vue";
import Login from "./Login.vue";
import SignUp from "./SignUp.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const message = useMessage();
const route = useRoute();

const mode = route.query["mode"] ? route.query["mode"] : "login";

onMounted(() => {
  if (route.params["message"]) {
    if (route.params["i18nMesasge"]) message.info(t(route.params["message"]))
    else message.info(route.params["message"]);
  }
})
</script>
